﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Combobox - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/combobox/jeasyui.fixeds.combobox.groupField.js"></script>
    <script>
        $(function () {

            var data2 = [{
                "value": "111",
                "text": "Firefox 2.0 or higher",
                "group": "yx"
            }, {
                "value": "222",
                "text": "yx1的项1",
                "group": "yx1"
            }, {
                "value": "333",
                "text": "Opera 9.0 or higher",
                "group": "yx"
            }, {
                "value": "444",
                "text": "yx1的项2",
                "group": "yx1"
            }];

            $("#com1").combobox({
                valueField: 'value',
                textField: 'text',
                groupField: 'group',
                method: "get",
                url: "combobox-group-data.json",
                loader: $.fn.combobox.extensions._loader
            });

            $("#com2").combobox({
                valueField: 'value',
                textField: 'text',
                groupField: 'group'
            });

            $("#com2").combobox("loadData", data2);

            $("#com3").combobox({
                valueField: 'value',
                textField: 'text',
                groupField: 'group',
                method: "get",
                url: "combobox-group-data.json"
            });
        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true" style="padding:30px;">
        <input id="com1" type="text" value="" />&nbsp;&nbsp;<span style="color:red;">源生的combobox。存在bug</span>
        <br /><br /><br /><br />
        <input id="com2" type="text" value="" />&nbsp;&nbsp;<span style="color:red;">修复后的combobox，采用 loadData 方式加载本地数据</span>
        <br /><br /><br /><br />
        <input id="com3" type="text" value="" />&nbsp;&nbsp;<span style="color:red;">修复后的combobox，采用 url 方式加载远程数据</span>
    </div>
</body>
</html>
